<template>
  <div class="content-box" v-loading="loading">
    <!-- 标题 -->
    <div class="head">
       <div class="addTaskTitle">
         上下线任务详情信息
       </div>
       <div class="back">
         <el-button type="primary" plain round size="small" icon="el-icon-back" @click="goback">返回</el-button>
       </div>
    </div>
    <!-- 面板信息 -->
    <div class="panel">
        <div class="basicPanel">
           <div class="basicTitle">基本信息</div>
           <div class="basicInfo">
              <div 
              :class="['basicItem',device === 'desktop'?'fourEqualParts':'']"
              v-for="(item,index) in basicClunms" :key="index">
                <div class="basicLable">{{ item.lable }}：</div>
                <div class="basicValue">
                  <template v-if="item.props === 'runStatusStr'">
                    <el-tag :type="runStatusColor(addTaskInfo[item.props])">{{ addTaskInfo[item.props] }}</el-tag>
                  </template>
                  <span v-else>{{ addTaskInfo[item.props] }}</span>
                </div>
              </div>
           </div>
        </div>
        <div class="implementPanel">
           <div class="implementTitle">计划执行集合</div>
           <div class="implementInfo">
            <el-table
             v-sticky-header
             ref="table"
             :data="addTaskInfo.taskLog"
             >
              <template v-for="(item,index) in columns">
                <el-table-column
                  :key="index"
                  :label="item.label"
                  :prop="item.prop"
                  :width="getColumnWidth(index)"
                  align="center"
                  :fixed="item.fixed"
                  :sortable="item.sortable ? item.sortable : false"
                  :show-overflow-tooltip="item.showTooltip"
                  v-if="item.visible"
                >
                </el-table-column>
              </template>
          
            </el-table>
           </div>
        </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getOnOffTaskById,
} from '@/api/business/productManagement'
export default {
  name: 'addTaskDetail',
  data() {
    return {
      basicClunms:[
        { props:'changeTypeStr',lable:'上下线类型'},
        { props:'createTime',lable:'计划创建时间'},
        { props:'createUserName',lable:'计划创建人'},
        { props:'manageUserName',lable:'产品管理员'},
        { props:'runStatusStr',lable:'执行状态'},
        { props:'startTime',lable:'开始时间'},
        { props:'endTime',lable:'结束时间'},
        { props:'updateTime',lable:'计划修改人时间'},
        { props:'updateUserName',lable:'计划修改人'},
        { props:'remarks',lable:'计划备注'},
      ],
      // 详情信息加载状态
      loading:false,
      // 添加任务信息
      addTaskInfo:{},
      // 计划执行集合表格列信息
      columns:[
        {label: `计划开始时间`,prop: "startTime",visible: true,pcWidth: 'auto',mobileWidth: 130,fixed: null,showTooltip: true,},
        {label: `计划结束时间`,prop: "endTime",visible: true,pcWidth: 'auto',mobileWidth: 130,fixed: null,showTooltip: true,},
        {label: `计划实际执行时间`,prop: "updateTime",visible: true,pcWidth: 230,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `执行状态`,prop: "runStatusStr",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `执行备注`,prop: "remarks",visible: true,pcWidth: 'auto',mobileWidth: 100,fixed: null,showTooltip: true,},
      ],
      // 上线下线任务id
      id:null
    };
  },
  created(){
    if(this.$route?.query?.id){
      this.getAddTaskInfoById(this.$route.query?.id)
      this.$set(this,'id',this.$route?.query?.id)
    }
  },
  computed: {
    ...mapGetters(["device"]),
    // 执行状态颜色yin
    runStatusColor:()=>{
      return (val)=>{
        switch (val) {
          case '待执行':
            return 'warning'
            break;
          case '执行中':
            return 'success'
            break;
          case '已作废':
            return 'danger'
            break;
          default:
            break;
        }
      }
    },
    // 计算当前列元素在所处环境的宽度
    getColumnWidth() {
        return (index) => {
          return this.isMobile
            ? this.columns[index].mobileWidth
            : this?.sidebar?.opened
            ? this.columns[index].pcWidth - this.slightWidth
            : this.columns[index].pcWidth + 17;
        };
    },
  },
  methods: {
     // 根据添加id查询添加任务详细信息
     getAddTaskInfoById(id){ 
      this.loading = true;
      getOnOffTaskById(id).then(res=>{
          console.log(res);
          this.addTaskInfo = res?.data
          this.loading = false          
       })
    },
    goback(){
      // 关闭当前页签
      this.$store.dispatch('tagsView/delView', this.$route)
      // 返回详情中的上下线列表
      this.$router.push({
            path:'/business/productManagement',
            query:{
              id:this?.id,
            }
      })
      this.$set(this,'id',null)
    }
  }
};
</script>

<style scoped lang='scss'>
.head{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  .addTaskTitle{
    font-weight: 700;
    font-size: 18px;
    margin-right: 20px;
  }
}
.panel{
  padding: 20px;
  background-color: #fff;
  border-radius: 6px;
  .basicPanel{
    width: 100%;
    .basicTitle{
      font-weight: 700;
      padding:0 0 20px;
    }
    .basicInfo{
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .basicItem{
        flex: 1;
        display: flex;
        font-size: 14px;
        color: #606266;
        padding: 5px 0;
        .basicLable{
          width: 130px;
        }
        .basicValue{
          width: 170px;
        }
      }
      // 四等分样式
      .fourEqualParts{
        flex: 1 1 25%; // 每个子盒子占 25% 的宽度，最多 4 个子盒子一行
        max-width: 25%; // 最大宽度为 25%，确保即使在一行中不足四个子元素时，每个子元素的宽度也不会超过 25%。
      }
    }
  }
  .implementPanel{
      width: 100%;
     .implementTitle{
       font-weight: 700;
       padding: 20px 0;
     }
  }
}
</style>